import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:live_plugin/screens/room/model/room_member.dart';
import 'package:live_plugin/screens/room/ui/member_item_widget.dart';

class MembersListDialog extends StatefulWidget {
  const MembersListDialog({Key? key}) : super(key: key);

  static void show(BuildContext context){
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(22)
        ),
        builder: (_)=>MembersListDialog(),
    );
  }

  @override
  _MembersListDialogState createState() => _MembersListDialogState();
}

class _MembersListDialogState extends State<MembersListDialog> {
  bool quite = true;

  List<RoomMember> members = [];

  @override
  void initState() {
    super.initState();
    for(int i = 0; i<20; i++){
      members.add(RoomMember());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white
      ),
      constraints: BoxConstraints(
        maxHeight: MediaQuery.of(context).size.height - 50
      ),
      child: Stack(
        children: [
          Column(
            children: [
              titleWgt,
              searchWgt,
              Expanded(
                child: memberList,
              ),
              actionsWgt
            ],
          ),
        ],
      ),
    );
  }

  Widget get titleWgt {
    return Container(
      padding: EdgeInsets.only(top: 30,left: 15,right: 15,bottom: 16),
      child: Row(
        children: [
          SizedBox(width: 16,height: 16),
          Expanded(child: Text(
            "管理成员（11）",
            style: TextStyle(
              fontSize: 18,
              color: Color(0xFF2E2E2E),
              fontWeight: FontWeight.bold
            ),
            textAlign: TextAlign.center,
          )),
          GestureDetector(
            child: Icon(
              Icons.close,
              size: 18,
              color: Color(0xFF333333),
            ),
            onTap: (){
              Navigator.pop(context);
            },
          )
        ],
      ),
    );
  }

  Widget get searchWgt {
    return Container(
      decoration: BoxDecoration(
          color: Color(0xFFE8E8E8),
          borderRadius: BorderRadius.circular(100)
      ),
      margin: EdgeInsets.only(left: 10,right: 10),
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(vertical: 5,horizontal: 18),
      child: Row(
        children: [
          Container(
            child: Icon(
                Icons.search,
                size: 20,
                color: Color(0xFF666666)
            ),
          ),
          Expanded(
            child: Container(
              child: TextField(
                decoration: InputDecoration.collapsed(
                  hintText: "搜索成员",
                  hintStyle: TextStyle(
                      fontSize: 14,
                      color: Color(0xFF666666)
                  ),
                ),
                style: TextStyle(
                    fontSize: 14,
                    color: Color(0xFF666666)
                ),
                textInputAction: TextInputAction.search,
                onChanged: (str){

                },
                onEditingComplete: (){

                },
              ),
              margin: EdgeInsets.only(left: 10),
            ),
          )
        ],
      ),
    );
  }
  
  Widget get memberList {
    return ListView.builder(
      itemBuilder: (ctx,index)=>MemberItemWidget(member: members[index]),
      itemCount: members.length,
    );
  }

  Widget get actionsWgt {
    return SafeArea(
      child: Container(
      padding: EdgeInsets.only(bottom: 20,left: 12,right: 12,top: 10),
      child: Row(
        children: [
          Expanded(child: InkWell(
            child: Container(
              alignment: Alignment.center,
              height: 44,
              decoration: BoxDecoration(
                  border: Border.all(
                      color: Color(0xFF979797),
                      width: 0.5
                  ),
                  borderRadius: BorderRadius.circular(2),
                  color: Colors.white
              ),
              child: Text(
                "全体静音",
                style: TextStyle(
                    fontSize: 16,
                    color: Color(0xFF2E2E2E)
                ),
              ),
            ),
            onTap: toggleQuite,
          )),
          SizedBox(width: 12,),
          Expanded(child: InkWell(
            child: Container(
              alignment: Alignment.center,
              height: 44,
              decoration: BoxDecoration(
                  border: Border.all(
                      color: Color(0xFF979797),
                      width: 0.5
                  ),
                  borderRadius: BorderRadius.circular(2),
                  color: Colors.white
              ),
              child: Text(
                "解除全体静音",
                style: TextStyle(
                    fontSize: 16,
                    color: Color(0xFF2E2E2E)
                ),
              ),
            ),
            onTap: toggleNotQuite,
          )),
          SizedBox(width: 12,),
          Expanded(child: Container(
            alignment: Alignment.center,
            height: 44,
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFF979797),
                    width: 0.5
                ),
                borderRadius: BorderRadius.circular(2),
                color: Colors.white
            ),
            child: Text(
              "邀请",
              style: TextStyle(
                  fontSize: 16,
                  color: Color(0xFF2E2E2E)
              ),
            ),
          )),
        ],
      ),
    ),
    );
  }

  void toggleQuite(){
    setState(() {
      members.forEach((element) {element.quite = true;});
    });
  }

  void toggleNotQuite(){
    setState(() {
      members.forEach((element) {element.quite = false;});
    });
  }
}
